<template>
	<div class="app-container">
		<div
			class="card-wrap flex-column justify-end card-padding step-sty-box">
			<el-steps
				space="33%"
				:active="active"
				align-center
				finish-status="success"
				class="step-sty">
				<el-step title="上传文件"></el-step>
				<el-step title="一键匹配"></el-step>
				<el-step title="一键核销"></el-step>
			</el-steps>
		</div>
		<div v-if="active == 1">
			<el-row :gutter="20">
				<el-col :span="12">
					<div
						class="card-wrap flex-column justify-end card-padding card-text">
						<div>
							<p>温馨提示：</p>
							<div>
								1、请先
								<span @click="downloadFile" class="down-model">
									下载银行流水模板
								</span>
								，并按照要求填写信息，若填写不规范可能导致检测出错。
							</div>
							<p>
								2、上传填写好的文件后，点击“一键匹配”，进行流水匹配。
							</p>
							<p>
								3、流水导入时，收款日期为文本格式，参考样例：2024-05-08
							</p>
						</div>
					</div>
				</el-col>
				<el-col :span="12">
					<div
						class="card-wrap flex-column justify-end card-padding"
						style="height: 272px">
						<div class="file-sty">
							<el-upload
								:disabled="disabled"
								ref="upload"
								class="upload-demo"
								drag
								:action="uploadFileUrl"
								:on-success="handleUploadSuccess"
								:accept="fileType.join(',')"
								:headers="headers"
								:before-upload="beforeUpload"
								:on-change="handleUploadChange"
								:file-list="filelist">
								<i class="el-icon-upload"></i>
								<div class="el-upload__text">
									将文件拖到此处，或
									<em>点击上传</em>
								</div>
								<div class="el-upload__tip" slot="tip">
									只能上传"xls","xlsx"文件
								</div>
							</el-upload>
						</div>
					</div>
				</el-col>
			</el-row>
			<div
				class="card-wrap flex justify-end card-padding"
				v-if="active == 1">
				<el-button @click="back">取消</el-button>
				<el-button
					@click="matching"
					type="primary"
					:disabled="matchState">
					一键匹配
				</el-button>
			</div>
		</div>

		<div v-if="active == 2">
			<Tabs
				:active-value="tabActive"
				:tabs="tabs"
				@change="changeTab"></Tabs>
			<div v-if="tabActive !== 3">
				<div class="card-wrap flex-column justify-end card-padding">
					<SearchForm
						@reset="reset"
						@search="search"
						ref="search"
						:queryParams="queryParams"
						labelWidth="100px">
						<el-form-item label="客户名称:">
							<el-input
								clearable
								v-model="queryParams.customerName"
								placeholder="请输入客户名称"></el-input>
						</el-form-item>
						<el-form-item label="车辆运营公司:">
							<el-select
								v-model="queryParams.carRunCompany"
								placeholder="请选择车辆运营公司"
								clearable
								filterable>
								<el-option
									v-for="item in financeProceedsTypeList"
									:key="item"
									:label="item"
									:value="item"></el-option>
							</el-select>
						</el-form-item>
						<!-- <el-form-item label="车牌号:">
                            <el-input
                                clearable
                                v-model="queryParams.carCode"
                                placeholder="请输入车牌号"></el-input>
                        </el-form-item>
                        <el-form-item label="应收单号:">
                            <el-input
                                clearable
                                v-model="queryParams.earnCode"
                                placeholder="请输入应收单号"></el-input>
                        </el-form-item>
                        <el-form-item label="业务单号:">
                            <el-input
                                clearable
                                v-model="queryParams.earnCustomerName"
                                placeholder="请输入业务单号"></el-input>
                        </el-form-item>     -->
					</SearchForm>
				</div>
				<div
					class="card-wrap flex-column justify-end card-padding"
					v-for="(item, index) in searchInfo"
					:key="index">
					<el-descriptions :column="4">
						<template slot="extra">
							<el-button type="primary" size="small" :disabled="item.status" @click="childWriteOff(item)">一键核销</el-button>
						</template>
						<el-descriptions-item label="客户名称">
							{{ item.customerName }}
						</el-descriptions-item>
						<el-descriptions-item label="车辆运营公司">
							{{ item.carRunCompany }}
						</el-descriptions-item>
						<el-descriptions-item label="收款日期">
							{{ item.collectionDate }}
						</el-descriptions-item>
						<el-descriptions-item label="回款金额">
							{{ format_thousand(item.amount) }}
						</el-descriptions-item>
						<el-descriptions-item label="收款行">
							{{ item.collectionBank }}
						</el-descriptions-item>
						<el-descriptions-item label="账号">
							{{ item.account }}
						</el-descriptions-item>
						<el-descriptions-item label="备注">
							{{ item.remark }}
						</el-descriptions-item>
					</el-descriptions>
					<el-collapse v-model="activeNames" @change="((e)=>handleChange(e,item))">
						<el-collapse-item :name="item.streamCode">
							<table-page
								:dataList="item.financeProceeds"
								:total="item.total"
								:isSelect="true"
								:page.sync="item.pageNum"
                				:limit.sync="item.pageSize"
								:pageSizes=[50,200,500]
								@selectionChange="e => selectionChange(e, item)"
								ref="table2"
								rowKey="proceedsId"
								@setSizeCurrent="handleChange('',item,'type')"
								border>
								<!-- 普通列插槽 -->
								<template slot="tableCol">
									<el-table-column
										label="车牌号"
										align="center"
										prop="carCode"
										min-width="120px"
										show-overflow-tooltip />
									<el-table-column
										label="应收类型"
										align="center"
										prop="proceedsTypeStr"
										min-width="120px"
										show-overflow-tooltip />
									<el-table-column
										label="期数"
										align="center"
										prop="periodsNum"
										min-width="120px"
										show-overflow-tooltip>
										<template slot-scope="scope">
											{{ scope.row.periodsNum || '-' }}
										</template>
									</el-table-column>
									<el-table-column
										label="待收金额"
										align="center"
										prop="waitAmount"
										min-width="120px"
										show-overflow-tooltip>
										<template slot-scope="scope">
											{{
												format_thousand(
													scope.row.waitAmount,
												)
											}}
										</template>
									</el-table-column>
									<el-table-column
										label="应收单号"
										align="center"
										prop="proceedsCode"
										min-width="120px"
										show-overflow-tooltip />
									<el-table-column
										label="业务单号"
										align="center"
										prop="earnCode"
										min-width="120px"
										show-overflow-tooltip />
									<el-table-column
										label="账单日"
										align="center"
										prop="accountantBillDate"
										min-width="120px"
										show-overflow-tooltip />
								</template>
							</table-page>
						</el-collapse-item>
					</el-collapse>
				</div>
			</div>
			<div v-if="tabActive == 3">
				<div class="table-title-wrap justify-end">
					<el-button
						type="primary"
						size="mini"
						@click="handleExport"
						v-hasPermi="['carInventory:outInventory:export']">
						导出
					</el-button>
				</div>
				<el-table :data="errorInfo" row-key="id" border>
					<el-table-column
						label="流水号"
						align="center"
						prop="streamCode"
						:show-overflow-tooltip="true" />
					<el-table-column
						label="客户名称"
						align="center"
						prop="customerName"
						:show-overflow-tooltip="true" />
					<el-table-column
						label="车辆运营公司"
						align="center"
						prop="carRunCompany"
						:show-overflow-tooltip="true" />
					<el-table-column
						label="收款日期"
						align="center"
						prop="collectionDateStr"
						:show-overflow-tooltip="true" />
					<el-table-column
						label="回款金额"
						align="center"
						prop="collectionAmount"
						:show-overflow-tooltip="true">
						<template slot-scope="scope">
							{{ format_thousand(scope.row.amount) }}
						</template>
					</el-table-column>
					<el-table-column
						label="备注"
						align="center"
						prop="remark"
						:show-overflow-tooltip="true" />
					<el-table-column
						label="收款行"
						align="center"
						prop="collectionBank"
						:show-overflow-tooltip="true" />
					<el-table-column
						label="账号"
						align="center"
						prop="account"
						:show-overflow-tooltip="true" />
					<el-table-column
						label="未匹配原因"
						align="center"
						prop="notMatchedCause"
						:show-overflow-tooltip="true" />
				</el-table>
			</div>

			<el-card class="hexiao">
				<el-button
					@click="writeOff"
					:disabled="writeoffStatus"
					type="primary">
					一键核销
				</el-button>
			</el-card>
		</div>
		<div v-if="active == 3">
			<CommonContainer title="核销单明细">
				<table-page
					:loading="loading"
					:dataList="wirteDataList"
					:total="wirteTotal"
					:page.sync="wirteQueryParams.pageNum"
					:limit.sync="wirteQueryParams.pageSize"
					border>
					<!-- 普通列插槽 -->
					<template slot="tableCol">
						<el-table-column
							label="客户名称"
							align="center"
							prop="customerName"
							min-width="120px"
							show-overflow-tooltip />
						<el-table-column
							label="收款银行"
							align="center"
							prop="collectionBank"
							min-width="120px"
							show-overflow-tooltip />
						<el-table-column
							label="账号"
							align="center"
							prop="account"
							min-width="120px"
							show-overflow-tooltip />
						<el-table-column
							label="收款日期"
							align="center"
							prop="collectionDateStr"
							min-width="120px"
							show-overflow-tooltip />
						<el-table-column
							label="流水号"
							align="center"
							prop="streamCode"
							min-width="120px"
							show-overflow-tooltip />
						<el-table-column
							label="车牌号"
							align="center"
							prop="carCode"
							min-width="120px"
							show-overflow-tooltip />
						<el-table-column
							label="应收类型"
							align="center"
							prop="proceedsTypeStr"
							min-width="120px"
							show-overflow-tooltip />
						<el-table-column
							label="期数"
							align="center"
							prop="periodsNum"
							min-width="120px"
							show-overflow-tooltip>
							<template slot-scope="scope">
								{{ scope.row.periodsNum || '-' }}
							</template>
						</el-table-column>
						<el-table-column
							label="本次核销金额"
							align="center"
							prop="chargeOffAmount"
							min-width="120px"
							show-overflow-tooltip>
							<template slot-scope="scope">
								{{ format_thousand(scope.row.chargeOffAmount) }}
							</template>
						</el-table-column>
						<el-table-column
							label="车辆运营公司"
							align="center"
							prop="carRunCompany"
							min-width="120px"
							show-overflow-tooltip />
						<el-table-column
							label="应收单号"
							align="center"
							prop="proceedsCode"
							min-width="120px"
							show-overflow-tooltip />
						<el-table-column
							label="业务单号"
							align="center"
							prop="earnCode"
							min-width="120px"
							show-overflow-tooltip />
						<el-table-column
							label="账单日"
							align="center"
							prop="accountantBillDate"
							min-width="120px"
							show-overflow-tooltip />
					</template>
				</table-page>
				<div class="card-wrap flex justify-end card-padding">
					<el-button @click="goBack">返回</el-button>
				</div>
			</CommonContainer>
		</div>
	</div>
</template>

<script>
	import Tabs from '@/components/Tabs/index.vue';
	import { chargeOff,getReceivableList,chargeOffSmall } from '@/api/finance/manage/collect/api.js';
	import { getToken } from '@/utils/auth';
	export default {
		name: 'OneClickVerification',
		components: { Tabs },
		dicts: [],
		props: {
			value: {
				type: Object,
			},
		},
		data() {
			return {
				fileType: ['.xlsx', '.xls'],
				filelist: [],
				disabled: false,
				uploadFileUrl:
					process.env.VUE_APP_BASE_API +
					'/finance/financeProceeds/importStencilBatchProceeds', // 上传的文件服务器地址
				headers: {
					Authorization: 'Bearer ' + getToken(),
				},
				tabs: [
					{
						label: '完全匹配',
						value: 1,
						num: 1,
						count: 1,
					},
					{
						label: '部分匹配',
						value: 2,
						num: 2,
						count: 2,
					},
					{
						label: '匹配失败',
						value: 3,
						num: 3,
						count: 3,
					},
				],
				tabActive: '1',
				queryParams: {
					customerName: null,
					carRunCompany: null,
				},
				childTotal:0,
				activeNames: [],
				financeProceedsTypeList: [], // 车辆运营公司数据
				active: 1,
				matchState: true, // 一键匹配按钮状态
				writeoffStatus: false, // 一键核销状态按钮
				loading: false,
				wirteDataList: [],
				wirteTotal: 0,
				wirteQueryParams: {},
				dataInfo: {
					notMatchedStream: [],
					partMatchedStreamList: [],
					allMatchedStreamList: [],
				},
				searchInfo: [], // 条件筛选后的数据
				errorInfo: [], // 导出失败的数据
				completelyList: [], // 完全匹配选中
				partList: [], // 部分匹配选中
			};
		},
		methods: {
			// 单个一键核销
			childWriteOff(info){
				console.log(info)
				if(this.tabActive=='1'){
					this.completelyList.map((res)=>{
						if(res.streamCode==info.streamCode){
							let obj = {...res,financeProceeds:res.childInfo}
							console.log(obj,'objobj')
							chargeOffSmall(obj).then((v)=>{
								if(v.code==200){
									this.searchInfo.map((sInfo)=>{
										// 核销成功后,需要改变父里面的回款金额,成功后要刷新当前的子列表
										if(sInfo.streamCode==v.data.streamCode){
											sInfo.amount = v.data.amount
											res.amount = v.data.amount
											let obj = {...v.data,pageNum:1,pageSize:50}
											this.handleChange('',obj)
										}
										
									})
								}
							})
						}
					})
					
				}else if(this.tabActive=='2'){
					// this.partList
					console.log(this.partList,'this.partListthis.partList')
					this.partList.map((res)=>{
						if(res.streamCode==info.streamCode){
							let obj = {...res,financeProceeds:res.childInfo}
							console.log(obj,'objobj')
							chargeOffSmall(obj).then((v)=>{
								if(v.code==200){
									this.searchInfo.map((sInfo)=>{
										// 核销成功后,需要改变父里面的回款金额,成功后要刷新当前的子列表
										if(sInfo.streamCode==v.data.streamCode){
											sInfo.amount = v.data.amount
											res.amount = v.data.amount
											let obj = {...v.data,pageNum:1,pageSize:50}
											this.handleChange('',obj)
										}
										
									})
								}
							})
						}
					})
				}
			},
			changeTab(id) {
				this.searchInfo =[]
				let financeProceedsTypeList = [];
				this.tabActive = id;
				this.queryParams.customerName = null;
				this.queryParams.carRunCompany = null;
				if (id == '1') {
					this.dataInfo.allMatchedStreamList?.map((res)=>{
						const obj = {...res,status:true,pageNum:1,pageSize:50,total:0}
						this.searchInfo.push(obj)
					})
					// this.searchInfo = this.dataInfo.allMatchedStreamList;
					this.dataInfo?.allMatchedStreamList?.map(res => {
						financeProceedsTypeList.push(res.carRunCompany);
					});
				} else if (id == '2') {
					this.dataInfo.partMatchedStreamList?.map((res)=>{
						const obj = {...res,status:true,pageNum:1,pageSize:50,total:0}
						this.searchInfo.push(obj)
					})
					// this.searchInfo = this.dataInfo.partMatchedStreamList;
					this.dataInfo?.partMatchedStreamList?.map(res => {
						financeProceedsTypeList.push(res.carRunCompany);
					});
				}
				this.financeProceedsTypeList = this._.uniq(
					financeProceedsTypeList,
				);
				this.toggleRowSelection(id);
			},
			toggleRowSelection(tabType) {
				this.$nextTick(() => {
					let selectedList = [];
					if (tabType == '1') {
						// completelyList
						selectedList = this._.cloneDeep(this.completelyList);
					} else if (tabType == '2') {
						// partList
						selectedList = this._.cloneDeep(this.partList);
					}
					if (Array.isArray(this.$refs.table2)) {
						this.$refs.table2.forEach((ref, index) => {
							let list = [];
							if (tabType == '1') {
								// completelyList
								list = selectedList?.[index]?.childInfo ?? [];
							} else if (tabType == '2') {
								// partList
								list = this.partList?.[index]?.childInfo ?? [];
							}
							let num = list?.length;
							let data =
								this.searchInfo?.[index]?.financeProceeds;
							ref.table_clearSelection();
							for (let index = 0; index < data?.length; index++) {
								if (num == 0) {
									break;
								}
								const element = data[index];
								let i = list?.findIndex(e => {
									return e.proceedsId === element.proceedsId;
								});
								if (i !== -1) {
									ref.table_toggleRowSelection(element, true);
									num -= 1;
								}
							}
						});
					}
				});
			},
			beforeUpload(file) {
				this.disabled = true;
				// 校检文件类型
				if (!this.checkType(file)) {
					this.disabled = false;
					return false;
				}
				return true;
			},
			checkType(file) {
				let pass = true;
				if (this.fileType?.length > 0) {
					const fileName = file.name.split('.');
					const fileExt = fileName[fileName?.length - 1];
					const isTypeOk = this.fileType.indexOf(`.${fileExt}`) >= 0;
					if (!isTypeOk) {
						this.$message.error(
							`文件格式不正确, 请上传${this.fileType.join(
								'/',
							)}格式文件!`,
						);
						this.filelist = [];
						pass = false;
					} else {
						pass = true;
					}
				}
				return pass;
			},
			handleUploadChange(file, filelist) {
				if (!this.checkType(file)) {
					this.disabled = false;
					return;
				}
				this.filelist = [file];
			},
			// 上传成功回调
			handleUploadSuccess(res, file) {
				this.disabled = false;
				this.loading = false;
				if (res.code == 200) {
					this.$message.success('上传成功');
					this.matchState = false;
					this.dataInfo = res.data;
					this.searchInfo = this.dataInfo.allMatchedStreamList;
					this.errorInfo = res.data?.notMatchedStream;
					this.dataInfo?.allMatchedStreamList?.map(res => {
						this.financeProceedsTypeList.push(res.carRunCompany);
					});
				} else {
					this.matchState = true;
					this.$message.error(res.msg);
				}
			},
			// 下载模版
			downloadFile() {
				this.download_get(
					'/system/templateFile/download/banksystem',
					{},
					`银行流水模板.xlsx`,
				);
			},
			// 切换展开
			handleChange(val,info,type) {
				console.log(val,'handleChangehandleChange')
				console.log(info,'handleChangehandleChange')
				const param = {
					pageNum:info.pageNum,
					pageSize:info.pageSize,
					carRunCompany:info.carRunCompany,
					customerName:info.customerName,
				}
				getReceivableList(param).then((res)=>{
					if(res.code==200){
						this.searchInfo.map((item)=>{
							console.log(item.streamCode,'item.streamCodeitem.streamCode')
							console.log(info.streamCode,'info.streamCodeinfo.streamCode')
							if(item.streamCode==info.streamCode){
								item.pageNum=type?item.pageNum:1
								item.pageSize=type?item.pageSize:50
								item.total=res.total
								item.financeProceeds=res.rows
								console.log(this.searchInfo)
							}	
						})
					}
				})
			},
			// 清空
			reset() {
				this.queryParams.customerName = null;
				this.queryParams.carRunCompany = null;
				if (this.tabActive == '1') {
					this.searchInfo = this.dataInfo.allMatchedStreamList;
				} else if (this.tabActive == '2') {
					this.searchInfo = this.dataInfo.partMatchedStreamList;
				}
			},
			// 搜索
			search() {
				let arr = [];
				let list = [];
				if (this.tabActive == '1') {
					arr = this.dataInfo.allMatchedStreamList;
				} else if (this.tabActive == '2') {
					arr = this.dataInfo.partMatchedStreamList;
				}

				if (
					this.queryParams.customerName &&
					this.queryParams.carRunCompany
				) {
					let list1 = [];
					arr.map(row => {
						if (
							row.customerName.includes(
								this.queryParams.customerName,
							)
						) {
							list1.push(row);
						}
					});
					list1.map(res => {
						if (
							res.carRunCompany == this.queryParams.carRunCompany
						) {
							list.push(res);
						}
					});
				} else {
					for (const item in this.queryParams) {
						arr.map(row => {
							if (row[item].includes(this.queryParams[item])) {
								list.push(row);
							}
						});
					}
				}
				this.searchInfo = list;
			},
			// 选中
			selectionChange(val, info) {
				if (this.tabActive == '1') {
					let index = this.completelyList.findIndex(
						item => item.streamCode == info.streamCode,
					);
					if (index !== -1) {
						this.completelyList.map(res => {
							if (res.streamCode === info.streamCode) {
								res.childInfo = this._.cloneDeep(val);
							}
						});
					} else {
						let param = {
							...info,
							childInfo: this._.cloneDeep(val),
						};
						this.completelyList.push(param);
					}
					// if (this.completelyList.length > 0) {
					// 	this.completelyList.map(res => {
					// 		if (val.length > 0) {
					// 			// 如果有父级数据,直接替换子级数据,如果没有,直接给数组赋值
					// 			if (res.streamCode === info.streamCode) {
					// 				res.childInfo = [];
					// 				res.childInfo = this._.cloneDeep(val);
					// 				// this.$set(res,'childInfo',val)
					// 			} else if (index == -1) {
					// 				let param = {
					// 					...info,
					// 					childInfo: this._.cloneDeep(val),
					// 				};
					// 				this.completelyList.push(param);
					// 			}
					// 		}
					// 	});
					// } else {
					// 	if (val.length > 0) {
					// 		let param = {
					// 			...info,
					// 			childInfo: this._.cloneDeep(val),
					// 		};
					// 		this.completelyList.push(param);
					// 	}
					// }
				} else if (this.tabActive == '2') {
					console.log(val)
					console.log(info)
					
					let index = this.partList.findIndex(
						item => item.streamCode === info.streamCode,
					);
					if (index !== -1) {
						this.partList.map(res => {
							if (res.streamCode === info.streamCode) {
								res.childInfo = this._.cloneDeep(val);
							}
						});
					} else {
						let param = {
							...info,
							childInfo: this._.cloneDeep(val),
						};
						this.partList.push(param);
					}
					// if (this.partList.length > 0) {
					// 	this.partList.map(res => {
					// 		if (val.length > 0) {
					// 			// 如果有父级数据,直接替换子级数据,如果没有,直接给数组赋值

					// 			if (res.streamCode === info.streamCode) {
					// 				res.childInfo = this._.cloneDeep(val);
					// 				// this.$set(res,'childInfo',val)
					// 			} else if (index == -1) {
					// 				let param = {
					// 					...info,
					// 					childInfo: this._.cloneDeep(val),
					// 				};
					// 				this.partList.push(param);
					// 			}
					// 		}
					// 	});
					// } else {
					// 	if (val.length > 0) {
					// 		let param = {
					// 			...info,
					// 			childInfo: this._.cloneDeep(val),
					// 		};
					// 		this.partList.push(param);
					// 	}
					// }
				}
				if (val?.length > 0) {
					this.writeoffStatus = false;	
					this.searchInfo.map((res)=>{
					if(res.streamCode==info.streamCode){
						res.status = false
					}
				})
				} else {
					this.writeoffStatus = true;
					this.searchInfo.map((res)=>{
					if(res.streamCode==info.streamCode){
						res.status = true
					}
				})

				}
				
			},
			// 返回
			back() {
				this.$router.push({ name: 'Collect' });
			},
			// 一键匹配
			matching() {
				this.active = 2;
				this.writeoffStatus = true;
			},
			// 一键核销
			writeOff() {
				this.active = 3;
				let list = [];
				if (this.completelyList?.length > 0) {
					let data = JSON.parse(JSON.stringify(this.completelyList));
					data.map(res => {
						if (res.childInfo?.length > 0) {
							res.childInfo.map(item => {
								let param = {
									...item,
									...res,
								};
								list.push(param);
							});
						}
					});
				}
				if (this.partList?.length > 0) {
					let data = JSON.parse(JSON.stringify(this.partList));
					data.map(res => {
						if (res.childInfo?.length > 0) {
							res.childInfo.map(item => {
								let param = {
									...item,
									...res,
								};
								list.push(param);
							});
						}
					});
				}
				list.map(res => {
					res.childInfo = [];
					res.financeProceeds = [];
				});

				const uniqueJsonArray = list.filter((value, index, self) => {
					return (
						index ===
						self.findIndex(
							item =>
								item.streamCode == value.streamCode &&
								item.proceedsId == value.proceedsId,
						)
					);
				});
				// 提交
				chargeOff(list).then(res => {
					if (res.code == 200) {
						this.wirteDataList = res.data;
					} else {
						this.$message.error(res.msg);
					}
				});
			},
			// 返回列表
			goBack() {
				this.$tab
					.closeOpenPage(this.$route)
					.then(() => {})
					.finally(() => {
						this._toPage({
							name: 'Collect',
						});
					});
			},
			// 导出
			handleExport() {
				this.download(
					'/finance/financeProceeds/exportNotMatchedStreamList',
					{ info: JSON.stringify(this.errorInfo) },
					`银行流水匹配失败导出_${new Date().getTime()}.xlsx`,
				);
			},
		},
		mounted() {
			this.searchInfo = this.dataInfo;
		},
		watch: {
			searchInfo: {
				deep: true,
				handler(val) {
					this.searchInfo = val;
				},
			},
			financeProceedsTypeList: {
				deep: true,
				handler(val) {
					this.financeProceedsTypeList = val;
				},
			},
			completelyList: {
				deep: true,
				handler(val) {
					this.completelyList = val;
				},
			},
		},
	};
</script>

<style lang="scss" scoped>
	.step-sty-box {
		display: flex;
		justify-content: center;
		align-items: center;
		.step-sty {
			width: 50%;
		}
	}
	.file-sty {
		display: flex;
		justify-content: center;
	}
	.card-text {
		height: 272px;
		display: flex;
		justify-content: left;
		.down-model {
			cursor: pointer;
			color: blue;
		}
	}
	.hexiao {
		display: flex;
		justify-content: end;
	}
</style>
